<template>
  <div class="app-container">
    <div class="custom_card">
      <el-row :gutter="15">
        <MmvTitle title="客户营销">
          <el-button
            type="text"
            style="font-size: 20px; margin-left: 10px"
            icon="el-icon-refresh"
            size="mini"
            @click="getCustomerMarketing"
          ></el-button>
        </MmvTitle>
      </el-row>
      <el-row :gutter="15">
        <MmvTitleSmall title="新客户标签数据洞察"></MmvTitleSmall>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="24" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">新客户</div>
              </el-col>
              <el-col :span="24" style="margin-bottom: 10px">
                <div class="cardTitle" :title="title1">
                  下单次数不超过{{ marketing.orderLimit }}次
                </div>
              </el-col>
              <el-col :span="6" style="margin-bottom: 10px; font-size: 30px">{{
                marketing.newMemberCount
              }}</el-col>
              <el-col :span="6" :offset="12" style="margin-bottom: 10px">
                <el-button @click="drawer(1)" type="text"> 查看客户 </el-button>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(1)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(1)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <MmvTitleSmall
          title="老客户标签数据洞察"
          style="margin-bottom: 40px; top: 20px"
        ></MmvTitleSmall>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="24" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  需重点关注客户
                </div>
              </el-col>
              <el-col :span="24" style="margin-bottom: 10px">
                <div class="cardTitle" :title="title2">
                  订单金额超过{{
                    marketing.attentionMemberOrderAmount
                  }}元，或订单数达到{{ marketing.attentionMemberOrderCount }}次
                </div>
              </el-col>
              <el-col :span="6" style="margin-bottom: 10px; font-size: 30px">{{
                marketing.attentionMemberCount
              }}</el-col>
              <el-col :span="6" :offset="12" style="margin-bottom: 10px">
                <el-button @click="drawer(2)" type="text"> 查看客户 </el-button>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(2)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(2)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="24" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  近期不活跃客户
                </div>
              </el-col>
              <el-col :span="24" style="margin-bottom: 10px">
                <div class="cardTitle" :title="title3">
                  订单金额超过{{
                    marketing.notActiveMemberOrderAmount
                  }}元，距最近一次下单超过{{
                    marketing.notActiveMemberRecentOrderDay
                  }}天
                </div>
              </el-col>
              <el-col :span="6" style="margin-bottom: 10px; font-size: 30px">{{
                marketing.notActiveMemberCount
              }}</el-col>
              <el-col :span="6" :offset="12" style="margin-bottom: 10px">
                <el-button @click="drawer(3)" type="text"> 查看客户 </el-button>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(3)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(3)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="24" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  近期活跃客户
                </div>
              </el-col>
              <el-col :span="24" style="margin-bottom: 10px">
                <div class="cardTitle" :title="title4">
                  近{{
                    marketing.activeMemberRecentOrderDay
                  }}天内有订单记录，且历史下单超过{{
                    marketing.activeMemberHistoryOrderCount
                  }}次
                </div>
              </el-col>
              <el-col :span="6" style="margin-bottom: 10px; font-size: 30px">{{
                marketing.activeMemberCount
              }}</el-col>
              <el-col :span="6" :offset="12" style="margin-bottom: 10px">
                <el-button @click="drawer(4)" type="text"> 查看客户 </el-button>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(4)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(4)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1" style="margin-top: 10px">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="24" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  需刺激消费客户
                </div>
              </el-col>
              <el-col :span="24" style="margin-bottom: 10px">
                <div class="cardTitle" :title="title5">
                  近{{
                    marketing.stimulateConsumptionMemberRecentNoOrderCount
                  }}天内无订单记录，且历史下单超过{{
                    marketing.stimulateConsumptionMemberHistoryOrderCount
                  }}次
                </div>
              </el-col>
              <el-col :span="6" style="margin-bottom: 10px; font-size: 30px">{{
                marketing.stimulateConsumptionMemberCount
              }}</el-col>
              <el-col :span="6" :offset="12" style="margin-bottom: 10px">
                <el-button @click="drawer(5)" type="text"> 查看客户 </el-button>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(5)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(5)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1" style="margin-top: 10px">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="24" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">老客户</div>
              </el-col>
              <el-col :span="24" style="margin-bottom: 10px">
                <div class="cardTitle" title="不满足以上标签条件设定的客户">
                  不满足以上标签条件设定的客户
                </div>
              </el-col>
              <el-col :span="6" style="margin-bottom: 10px; font-size: 30px">{{
                marketing.oldMemberCount
              }}</el-col>
              <el-col :span="6" :offset="12" style="margin-bottom: 10px">
                <el-button @click="drawer(8)" type="text"> 查看客户 </el-button>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(8)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(8)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="19" :offset="1" style="margin-top: 20px">
          <el-collapse
            accordion
            style="
              border: 1px solid rgb(242 242 242);
              text-align: left;
              border-radius: 4px;
              background-color: rgb(242 242 242);
            "
          >
            <el-row>
              <el-col :span="24">
                <div style="color: rgb(51 51 51); margin: 10px 10px">
                  营销指南:
                </div>
              </el-col>
              <el-col :span="2" style="font-size: 30px; text-align: center">
                <i class="el-icon-info"></i>
              </el-col>
              <el-col :span="22" style="margin-bottom: 10px">
                <div style="color: rgb(163 155 155)">
                  通过系统标签分类客户，了解不同群体客户是否对门店具有较高的满意度和相关业务需求，对不同客户群开展活动和精准推送
                </div>
                <div style="color: rgb(66 63 63)">
                  点击右上角创建活动，选择不同活动类型，发布后可多关注活动运营数据进行二次营销。
                </div>
              </el-col>
            </el-row>
          </el-collapse>
        </el-col>
      </el-row>
    </div>
    <el-drawer
      title="查看客户信息"
      :visible.sync="drawerFlag"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="24" class="table-padding">
          <el-form
            :model="queryParams"
            ref="queryForm"
            inline
            label-width="68px"
          >
            <el-form-item prop="memberNo">
              <el-input
                v-model="queryParams.memberNo"
                placeholder="请输入客户名称/微信名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table :data="customerMarketingList" v-loading="loading" border>
            <el-table-column
              label="微信图像"
              align="center"
              min-width="120"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                <el-avatar :src="row.vxUrl"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column
              label="昵称"
              prop="vxName"
              align="center"
              min-width="180"
              show-overflow-tooltip
            />
            <el-table-column
              label="客户名称"
              prop="memberName"
              align="center"
              min-width="180"
              show-overflow-tooltip
            />
            <el-table-column
              label="客户类型"
              align="center"
              min-width="120"
              show-overflow-tooltip
              prop="memberType"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.memberType"
                  :value="scope.row.memberType"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="认证状态"
              align="center"
              min-width="120"
              show-overflow-tooltip
              prop="censorStatus"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.censorStatus"
                  :value="scope.row.censorStatus"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="最后一次订单时间"
              prop="lastOrderTime"
              align="center"
              min-width="180"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.lastOrderTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="最后一次访问时间"
              prop="lastLoginTime"
              align="center"
              min-width="180"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div>
                  {{ parseTime(scope.row.lastLoginTime, '{y}-{m}-{d}') }}
                </div>
                <div>{{ scope.row.daysInfo }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="下单次数"
              align="center"
              min-width="120"
              show-overflow-tooltip
              prop="orderCount"
            >
              <template slot-scope="scope">
                {{ scope.row.orderCount || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              label="历史消费金额"
              align="center"
              min-width="180"
              show-overflow-tooltip
              prop="amountSum"
            >
              <template slot-scope="scope">
                {{ scope.row.amountSum || 0 }}元
              </template>
            </el-table-column>
            <el-table-column
              label="客户标签"
              align="center"
              min-width="120"
              show-overflow-tooltip
              prop="labelClassify"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.label_classify"
                  :value="scope.row.labelClassify"
                />
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getCustomerMarketingList"
          />
        </el-col>
      </el-row>
    </el-drawer>

    <el-dialog title="创建营销活动" :visible.sync="dialogVisible" width="500px">
      <el-form ref="form1" label-width="100px">
        <el-form-item label="活动类型">
          <el-radio-group v-model="activityType" size="medium">
            <el-radio
              v-for="dict in dict.type.activityType"
              :label="dict.value"
              :value="dict.value"
              :key="dict.value"
              >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addActivityManage">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { customerMarketing, customerMarketingList } from '@/api/member/member'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvTitleSmall from '@/components/MmvUI/MmvTitleSmall.vue'
export default {
  components: {
    MmvTitle,
    MmvTitleSmall,
  },
  dicts: [
    'memberType',
    'memberSource',
    'memberStatus',
    'censorStatus',
    'label_classify',
    'activityType',
  ],
  data() {
    return {
      marketingTarget: 1,
      dialogVisible: false,
      activityType: '1',
      marketing: {},
      // 遮罩层
      loading: true,
      title1: null,
      title2: null,
      title3: null,
      title4: null,
      title5: null,
      drawerFlag: false,
      direction: 'rtl',
      customerMarketingList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        memberNo: null,
        labelClassify: 1,
      },
    }
  },
  created() {
    this.getCustomerMarketing()
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getCustomerMarketingList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    drawer(type) {
      this.drawerFlag = true
      this.queryParams.labelClassify = type
      this.getCustomerMarketingList()
    },
    getCustomerMarketingList() {
      this.loading = true
      customerMarketingList(this.queryParams).then((response) => {
        this.customerMarketingList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleClose(done) {
      done()
    },
    getCustomerMarketing() {
      customerMarketing().then((response) => {
        this.marketing = response.data
        this.title1 = '下单次数不超过' + this.marketing.orderLimit + '次'
        this.title2 =
          '订单金额超过' +
          this.marketing.attentionMemberOrderAmount +
          '元，或订单数达到' +
          this.marketing.attentionMemberOrderCount +
          '次'
        this.title3 =
          '订单金额超过' +
          this.marketing.notActiveMemberOrderAmount +
          '元，距最近一次下单超过' +
          this.marketing.notActiveMemberRecentOrderDay +
          '天'
        this.title4 =
          '近' +
          this.marketing.activeMemberRecentOrderDay +
          '天内有订单记录，且历史下单超过' +
          this.marketing.activeMemberHistoryOrderCount +
          '次'
        this.title5 =
          '近' +
          this.marketing.stimulateConsumptionMemberRecentNoOrderCount +
          '天内无订单记录，且历史下单超过' +
          this.marketing.stimulateConsumptionMemberHistoryOrderCount +
          '次'
      })
    },
    addActivity(marketingTarget) {
      this.dialogVisible = true
      this.marketingTarget = marketingTarget
    },
    addActivityManage() {
      if (this.activityType) {
        // this.$router.push({
        //   path:
        //     '/activityManage/add/' +
        //     this.activityType +
        //     '/' +
        //     this.marketingTarget,
        // })
        this.$router.push({
          name: 'activityManageAdd',
          query: { target: this.marketingTarget, type: this.activityType },
        })
        this.dialogVisible = false
      } else {
        this.$modal.msgError('请选择活动类型')
      }
    },
    historical(marketingTarget) {
      this.$router.push({
        name: 'historicalActivities',
        query: { target: marketingTarget },
      })
    },
  },
}
</script>
<style scoped="scoped">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.el-row {
  margin-left: 0 !important;
  margin-right: 0px !important;
}

.cardTitle {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 12px;
}
</style>
